import React, { Component } from 'react';

import { base,  } from 'nc-lightapp-front';
const {NCScrollElement, NCDiv, NCAffix, NCRefreshBtn } = base;
import ApproveProcessssc from 'ssccommon/components/approveprocess/ApproveProcessssc';

class BillHead extends Component {
    static comName = 'BillHead';

    constructor(props) {
        super();
        this.state = {
            isShowRefreshBtn: props.ncProps.getUrlParam('status') == 'browse' 
        }

        props.ncProps.setHashChangeCallback(() =>{
            let isShowRefreshBtn = false;
            if (props.ncProps.getUrlParam('status') == 'browse' ) {
                isShowRefreshBtn = true;
            }
            this.setState({
                isShowRefreshBtn
            })
        });
        window.addEventListener('hashchange', () => {
            let isShowRefreshBtn = false;
            if (props.ncProps.getUrlParam('status') == 'browse' ) {
                isShowRefreshBtn = true;
            }
            this.setState({
                isShowRefreshBtn
            })
        }) 
    }

    /**
     * 显示流程组件
     * @param {*} billtype 
     * @param {*} billid 
     */
    ApproveProcessShow(billtype, billid){
        this.approveProcess.show(billtype, billid);
    }
    /**
     * 隐藏流程组件
     * @param {*} billtype 
     * @param {*} billid 
     */
    ApproveProcessHide(){
        this.approveProcess.hide();
    }
    /**
     * 刷新流程组件
     */
    ApproveProcessRefresh(){
        this.approveProcess.refresh();
    }
    handleClick(){
        if(this.props.refreshButtonEvent){
            this.props.refreshButtonEvent();
        }
    }

    render() {

        let buttonGroup = null;
        let billForm = null;

        let { children, ...otherProps } = this.props;
        const { createCardPagination } = otherProps.ncProps.cardPagination;
        const { profileLayoutList } = otherProps;

        React.Children.forEach(children, (child) => {
            if (typeof child.type == 'function') {
                switch (child.type.comName) { //此处获取函数名不兼容。后续处理
                    case 'ButtonGroup':
                        buttonGroup = React.cloneElement(child, otherProps);
                        break;
                    case 'ButtonGroupListCard':
                        buttonGroup = React.cloneElement(child, otherProps);
                        break;
                    case 'Form':
                        billForm = React.cloneElement(child, otherProps);
                        break;
                    default:
                        console.warn('BillHead组件仅接受ButtonGroup子组件')
                }
            }

        });

        if (billForm) {
            billForm = (
                <NCScrollElement name='forminfo'>
                    {billForm}
                </NCScrollElement>
            )
        }

        const { createBillHeadInfo } = this.props.ncProps.BillHeadInfo
        let titleAreaJsx = null; 
        if (this.props.back && this.props.back.showBack == true) {
                titleAreaJsx = createBillHeadInfo({
                title: this.props.title,
                billCode: this.props.billcode,
                backBtnClick: this.props.back.onClick || (()=>{
                    this.props.ncProps.pushTo("/list", {
                        pagecode: this.props.back.listPagecode
                    });
                })
            })
        } else {
            titleAreaJsx = createBillHeadInfo({
                title: this.props.title,
                initShowBackBtn: false,
                billCode: this.props.billcode,
            })
        }
        return (
            <div className="nc-bill-top-area">
                <NCAffix offsetTop={0} >

                <NCDiv areaCode={NCDiv.config.HEADER}>
                <div className="nc-bill-header-area">
                    <span>
                        {titleAreaJsx}
                    </span>
                    <div className="header-button-area">
                        {
                            buttonGroup
                        }
                    </div>
                    <NCRefreshBtn style={{cursor : 'pointer', display : this.state.isShowRefreshBtn?'inherit':'none'}} onClick={ this.handleClick.bind(this) }></NCRefreshBtn>
                    {(this.props.pageInfoConfig || {}).show == true ? (
                        <div className='header-cardPagination-area' style={{float: 'right'}}>
                            {
                                createCardPagination({
                                    handlePageInfoChange: this.props.pageInfoConfig.handlePageInfoChange,
                                    dataSource : this.props.pageInfoConfig.dataSource
                                })
                            }
                        </div>
                    ) : (null)
                    }
                </div>
                </NCDiv>
                </NCAffix>
                <ApproveProcessssc ref={approveProcess => this.approveProcess = approveProcess}/>
                {billForm}
            </div>


        )
    }
}

export default BillHead
